<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>南声-个人中心</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="./css/personal.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2673097_48rfn6lutg4.css">
    <script src="../layui/layui.js"></script>
</head>

<body>
    <!-- 页面头 -->
    <ul class="layui-nav">
        <li class="layui-nav-item"><a class="headerTitle" href="javascript:;">南 声</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;"> <span class="userface">牵</span> <i
                    class="layui-icon layui-icon-down layui-nav-more"></i> </a>
            <dl class="layui-nav-child layui-nav-child-c layui-anim layui-anim-upbit">
                <dd>设置</dd>
                <dd>写文章</dd>
                <dd>退出登录</dd>
            </dl>
        </li>
    </ul>
    <!-- 个人信息部分 -->
    <div class="personlaInfo">
        <div><span class="userface">牵</span></div>
        <div class="infos">
            <span><i class="layui-icon layui-icon-user"> 昵称 : 牵牛</i></span>
            <span><i class="layui-icon layui-icon-time"> 加入时间 : 1999-09-09</i></span>
            <span><i class="layui-icon layui-icon-male"> 男生</i></span>
            <span><i class="layui-icon layui-icon-location"> ShenYang</i></span>
            <span><i class="layui-icon layui-icon-email"> 12345678@163.com</i></span>
        </div>
        <div class="layui-text">
            <i class="layui-icon layui-icon-fire"> 座右铭</i> : 常在河边走，哪能不湿鞋
        </div>
    </div>
    <!-- 文章列表 -->
    <div class="listArticle">
        <div class="layui-card">
            <div class="layui-card-header">文章列表</div>
            <div class="layui-card-body">
                <div class="articleItem">
                    <a href="javascript:;">Java学习教程</a>
                    <div>
                        <i class="layui-icon layui-icon-praise"> 36</i>
                        <i class="iconfont icon-eye"> 999</i>
                    </div>
                </div>
                <div class="articleItem">
                    <a href="javascript:;">Java学习教程</a>
                    <div>
                        <i class="layui-icon layui-icon-praise"> 36</i>
                        <i class="iconfont icon-eye"> 999</i>
                    </div>
                </div>
                <div class="articleItem">
                    <a href="javascript:;">Java学习教程</a>
                    <div>
                        <i class="layui-icon layui-icon-praise"> 36</i>
                        <i class="iconfont icon-eye"> 999</i>
                    </div>
                </div>
            </div>
            <div id="page" style="margin-left: 10px;"></div>
        </div>
    </div>

    <script>
        layui.use(['laypage'], function () {
            let laypage = layui.laypage;
            laypage.render({
                elem: 'page', 
                limit : 8,
                count: 33 //数据总数
            });
        })
    </script>
</body>

</html>